<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素显示模式</title>
    <style>
        /* 块元素，独占一行；高度，宽度，外边距和内边距都可控；宽度默认为容器的宽度；是一个容器或者盒子，可放行内和块元素 */
        /* 块元素为h，div，p，ul，ol，li等 */
        h4 {
            background-color: blue;
            height: 200px;
        }

        div {
            background-color: pink;
        }

        /* 行内元素，相邻行内元素在一行上，一行可以显示多个 */
        /* 高度和宽度直接设置无效，默认宽度为内容宽度，只可容纳文本或其他行为元素 */
        /* a strong b em i del s span */
        a {
            color: red;
            text-decoration: none;
        }

        /* 行内块元素，可以一行多个，宽度默认为文本宽度，内边距、外边距、高度、宽度都可换 */
        /* img input td */
    </style>
</head>

<body>
    <h4>1111111111</h4>
    <div>2222222222</div>
    <a href="http://baidu.com">baidu</a> <a href="http://bilibili.com">哔哩哔哩</a>
</body>

</html>